<template>
  <div class="sub-category">
    <div class="container">
      <!-- 组件化 -->
      <SubBread />
      <!-- 筛选区域 -->
      <SubFilter />
       <div class="goods-list">
        <!-- 排序组件 -->
        <SubSort />
        <!-- 商品列表 -->
        <SubList/>
      </div>
    </div>
  </div>
</template>

<script>
// 导入vue函数
import { ref, onMounted, provide } from 'vue'
// 导入 useRoute函数,获取ruote实例
import { useRoute } from 'vue-router'
// 导入获取二级分类api
import { findSubCategoryFilter } from '@/api/category'
// 导入面包屑组件
import SubBread from './components/sub-bread.vue'
// 导入商品筛选条件
import SubFilter from './components/sub-filter.vue'
// 导入排序组件
import SubSort from './components/sub-sort.vue'
// 导入商品列表组件
import SubList from './components/sub-list.vue'

export default {
  name: 'SubCategory',

  // 注册子组件
  components: {
    SubBread,
    SubFilter,
    SubSort,
    SubList
  },

  setup () {
    // 定义空的二级分类 , 因为获取的是对象,所以定义时默认为对象{}
    const subCateData = ref({})
    // 获取路由实例
    const route = useRoute()
    // 注入数据=>顶层注入一次，下边的子孙组件都可以使用这个数据
    provide('subCateData', subCateData)

    // 提供过滤条件的数据(响应式的)
    /**
     * 列表过滤(筛选)/列表联动过滤   -->  基于组件化开发
     *
     * 实现步骤:
     * 1.在vuex或 vue3的依赖注入,提供过滤条件的数据(目的是共享)
     * 2.在过滤条件的组建中,获取上一步提供的过滤条件的数据 --> 点击过滤条件,修改过滤条件的数据
     * 3.在列表组件中,获取上一步提供的过滤条件的数据 --> watch监听过滤条件的修改变化,拿到最新修改的过滤条件参数,重新请求
     *
     */
    const filterParams = ref({
      // 筛选条件数据
      sortField: null, // 排序类别
      attrs: [], // 商品属性
      brandId: null // 品牌名称
    })
    // 顶层注入数据
    provide('filterParams', filterParams)

    // 定义数据,获取二级分类数据
    const getSubCateData = async () => {
      // 调用二级分类接口,并结构赋值出来
      const { result } = await findSubCategoryFilter(route.params.id)
      console.log('二级分类:', result)

      // 添加筛选条件,默认 全部数据 和 选中状态 1.品牌,2.属性
      // 1.品牌
      // 给后台品牌都添加一个 是否选中的属性
      result.brands.forEach((brand) => {
        brand.selected = false
      })
      // 自己添加一个全部的条件,默认选中
      result.brands.unshift({
        id: null,
        name: '全部',
        selected: 'true'
      })
      // 2.属性(动态多个)
      // 2-1先给saleProperties遍历循环
      result.saleProperties.forEach((item) => {
        // 2-2再给其旗下的小标签properties 进行遍历
        item.properties.forEach((per) => {
          // 2-3给小标签添加false新状态
          per.selected = false
        })
        // console.log(item)
        // 给品牌标签同级的标签,进行最前端添加全部的数据和状态
        item.properties.unshift({
          id: null,
          name: '全部',
          selected: true
        })
      })

      // 赋值
      subCateData.value = result
    }

    // 挂载
    onMounted(() => {
      // 调用获取二级分类的方法
      getSubCateData()
    })

    return {}
  }
}
</script>
<style scoped lang='less'>
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
</style>
